<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>data-property属性验证</title>
    <script src="../../js/vue.js"></script>
</head>
<body>
<div id="app1">
    <simple-counter-1></simple-counter-1>
    <simple-counter-1></simple-counter-1>
    <simple-counter-1></simple-counter-1>
</div>

<div id="app2">
    <simple-counter-2></simple-counter-2>
    <simple-counter-2></simple-counter-2>
    <simple-counter-2></simple-counter-2>
    <simple-counter-3></simple-counter-3>
</div>
</body>
<script>
    let countArr = {counter: 0};
    Vue.component('simple-counter-1', {
        template: '<button v-on:click="counter += 1">{{ counter }}</button>',
        data: function () {
            //这样返回的对象会被三个组件实例共享, 会相互影响
            return countArr;
        }
    });
    let app1 = new Vue({
        el: '#app1',
        data: {
            message: 'hello'
        }
    });

    Vue.component('simple-counter-2', {
        template: '<button v-on:click="counter += 1">{{ counter }}</button>',
        data: function () {
            //这样给每个组件的实例返回一个新的对象
            return {
                counter: 0
            };
        }
    });
    Vue.component('simple-counter-3', {
        template: '<button v-on:click="add">{{ counter }}</button>',
        data: function () {
            //这样给每个组件的实例返回一个新的对象
            return {
                counter: 0
            };
        },
        methods: {
            add: function () {
                this.counter++;
            }
        }
    });
    let app2 = new Vue({
        el: '#app2',
        data: {
            message: 'hello'
        }
    });

</script>
</html>